<template>
  <div class="app-container">
    <div class="article-details">
      <h1 class="title">{{ title }}</h1>

      <div class="item" v-for="(item, index) in newData" :key="index">
        <h1>{{ item.label }}</h1>
        <!-- 背景 -->
        <div v-if="item.english.toLowerCase() === 'background'">
          {{ background }}
        </div>
        <!-- 解答 -->
        <ul v-if="item.english.toLowerCase() === 'answer'">
          <li v-for="(t, i) in contentList" :key="i">
            <template v-if="t.type == '1'">
              <p>
                <Reader :obj="t"></Reader>
              </p>
            </template>
            <template v-if="t.type == '2'">
              <p>
                <el-image
                  style="width: 500px"
                  :src="t.url"
                  :preview-src-list="[t.url]"
                >
                </el-image>
              </p>
            </template>
            <template v-if="t.type == '3'">
              <a :href="t.url">{{ t.content }}</a>
            </template>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { getQaInfoApi } from "@/wss/api/doc/qa.js";
import {
  getDocModuleListApi,
  getDocModuleByTypeApi,
} from "@/wss/api/contentTemplate";
import Reader from "../../../components/reader.vue";
export default {
  components: { Reader },
  props: {},
  data() {
    return {
      title: "",
      itemDetails: {},
      contentList: [],
      Taber: "",
      newData: [],
      background: "",
      docModuleType: {},
    };
  },

  mounted() {
    console.log("this.$route.query", this.$route.query);

    if (this.$route.query.esId) {
      this.getQaInfoApiMet({ id: this.$route.query.esId });
    } else {
      this.getQaInfoApiMet({ id: this.$route.query.id });
    }
    this.getDocModuleListApiMet();
    // 后期可能使用vuex还更新数据
    // let { data } = await getTypteCatgoryApi({ type: 'question', no: 2 })

    // 拼接内容模板的内容
    // this.newData = data.map((item) => {
    //   return {
    //     label: item.module + '/' + item.english,
    //   }
    // })

    // 根据id查询详细
    let result = null;
    // if (this.$route.query.esId) {
    //   result = await getQaInfoApi({ id: this.$route.query.esId })
    // } else {
    //   result = await getQaInfoApi({ id: this.$route.query.idStr })
    // }

    // console.log('result111111', result)
    // let answerArr = result.data.answer
    // // 排序sort
    // for (let i = 0; i < answerArr.length; i++) {
    //   for (let j = 0; j < answerArr.length; j++) {
    //     if (answerArr[i].sort < answerArr[j].sort) {
    //       let temp = answerArr[i]
    //       answerArr[i] = answerArr[j]
    //       answerArr[j] = temp
    //     }
    //   }
    // }
    // this.contentList = answerArr
    // // 背景
    // this.newData.unshift({ label: '背景/background' })
    // // 详细数据放到”问答“栏目下
    // this.newData.forEach((item) => {
    //   if (/answer/.test(item.label)) {
    //     item.data = result.data.answer
    //   }
    // })
    // // 获取标题
    // this.title = result.data.title
  },

  methods: {
    async getQaInfoApiMet(id) {
      let { code, data, msg } = await getQaInfoApi(id).then((res) => res);
      this.background = data.background;
      console.log("resultresult---", data);
      if (code == 200) {
        this.title = data.title;
        this.contentList = data.answer;
      }

      console.log(" this.contentList", this.contentList);
    },

    //  内容模版  list
    async getDocModuleListApiMet() {
      let result = await getDocModuleListApi();
      if (result.code == 200) {
        result.rows.forEach((item) => {
          item.type == "问答"
            ? (this.docModuleType = {
                type: item.type,
                no: item.no,
              })
            : "";
        });
      }
      this.getDocModuleByTypeApiMet(this.docModuleType);
    },

    //  内容模版  按类型查找
    async getDocModuleByTypeApiMet(type) {
      let { code, data } = await getDocModuleByTypeApi(type);
      if (code == 200) {
        // console.log(data, "data");
        // // 拼接内容模板的内容
        this.newData = data.map((item) => {
          return {
            label: item.module + "/" + item.english,
            english: item.english,
          };
        });
      }
      console.log("newData", data, this.newData);
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  background-color: #f5f5f5;
  .title {
    font-weight: 900;
    height: 20%;
    display: flex;
    margin-bottom: 30px;
    align-items: center;
    justify-content: center;
    color: #e37709;
  }
  img {
    width: 200px;
    height: 200px;
  }
  .item {
    margin: 60px 0px;
  }
  .article-details {
    background-color: #ffffff;
    padding: 20px;
    ul li {
      font-size: 16px;
    }
    .tableBox {
      display: flex;
      height: 200px;
      justify-content: space-evenly;

      .item {
        text-align: center;
        width: 200px;
        border: 1px solid #cccc;
        height: 100%;
      }
      .item:nth-child(2),
      .item:nth-child(3) {
        flex: 10;
      }
      .content {
        height: 80%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .background {
      margin-top: 20px;
      margin-bottom: -4px;
      .background-content {
        padding-top: 30px;
        height: 100px;
      }
    }
    ul {
      padding: 0px;
      li {
        list-style: none;
        margin: 32px 0px;
        font-size: 16px;
        font-family: "PingFangSC-Regular", "PingFang SC";
      }
    }
  }
}
</style>